<template>
	<view>
		<!-- 防止内容到状态栏 -->
		<view  class="nav-fixed"></view>
		<!-- 标题内容 -->
		<view class="mulu-left">
			<view class="mulu-title">
				<view class="mulu-left">
					<image :src="list.imgSrc" mode=""></image>
				</view>
				<view class="mulu-center">
					<view class="mulu-center-title">{{list.title}}</view>
					<view>{{list.author}}</view>
				</view>
				<view class="mulu-right" @click="back">
					&gt;
				</view>
			</view>
		</view>
		<!-- 连载目录 -->
		<view class="lianzai-mulu">
			<!--连载中  -->
			<view class="lianzai-title">
				<view class="lianzai-title-left">
					<view>连载中</view>
					<view>共{{title.length}}章</view>
				</view>
				<view class="lianzai-title-right" @click="paiXu">
					<view v-show="inShow">
						<image src="/static/137/dao.png" mode=""></image>
						<text>倒序</text>
					</view>
					<view v-show="!inShow">
						<image src="/static/137/zeng.png" mode=""></image>
						<text>正序</text>
					</view>
				</view>
			</view>
			<!-- 间隔槽 -->
			<u-gap height="7" bg-color="#F4F4F4"></u-gap>
			<!-- l连载列表 -->
			<view class="lianzai-list">
				<view class="lianzai-list-item" v-for="(item,index) in title" :key="index" @click="listXuanzhong(index)">
					<view :class="{black:true,activelist:item.icon}">
						<image v-show="item.icon" src="/static/index/130.png" mode=""></image>
						{{item.title}}
					</view>
					<view class="gary">{{item.free}}</view>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<u-divider color="#AAAAAA" margin-top="30">共{{title.length}}章</u-divider>
		<view class="textIcon">
			<view><image src="/static/index/100.png" mode=""></image></view>
			<view><image src="/static/index/download.png" mode=""></image></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"yuedu-mulupopup",
		props:{
			list:{
				type:Object,
				default(){
					return {}
				}
			},
			title:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				inShow:true,  //控制排序显示隐藏
				listIndex:Number,   //列表索引
			};
		},
		methods:{
			listXuanzhong(index){ //当列表被选中时
				//console.log(index)
				//this.listIndex = index 
				//发现这样子做,退出页面然后再进来会有选中样式丢失问题
				//优化思路:根据数据列表里的icon来决定样式
				//选中时增加图标
				this.title.forEach((item)=>{
					//先全部将图标隐藏,然后选中的那个显示
					item.icon = false
				})
				//将选中的那个列表的图标显示
				this.title[index].icon =! this.title[index].icon
			},
			back(){
				this.$emit('back')
			},
			paiXu(){
				this.title.forEach((item)=>{
					//先全部将图标隐藏
					item.icon = false
				})
				this.listIndex = -1
				this.$emit('paiXu')
			}
		}
	}
</script>

<style scoped lang="scss">
.nav-fixed{
	height: 50rpx;
	background-color: #fff;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}
.mulu-left{
	.mulu-title{
		display: flex;
		padding:80rpx 27rpx 0;
		font-family: Microsoft YaHei;
		font-weight: 400;
		.mulu-left{
			width: 110rpx;
			image{
				width: 92rpx;
				height: 120rpx;
			}
		}
		.mulu-center{
			width: 400rpx;
			padding-left: 15rpx;
			view{
				font-size: 26rpx;
				color: #C6C6C6;
				line-height: 50rpx;
			}
			.mulu-center-title{
				font-size: 34rpx;
				color: #000000;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis; 
			}
		}
		.mulu-right{
			width: 58rpx;
			font-size: 40rpx;
		}
	}
}
.lianzai-mulu{
	.lianzai-title{
		display: flex;
		justify-content: space-between;
		padding: 15rpx 26rpx;
		.lianzai-title-left{
			display: flex;
			view{
				font-size: 26rpx;
				font-weight: 400;
				color: #C6C6C6;
				line-height: 50rpx;
				margin: 0 10rpx;
			}
		}
		.lianzai-title-right{
			view{
				image{
					width: 21rpx;
					height: 23rpx;
				}
			}
		}
	}
	.lianzai-list{
		margin-top: 15rpx;
		.lianzai-list-item{
			display: flex;
			justify-content: space-between;
			padding: 0 34rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #545353;
			line-height: 50rpx;
			height: 68rpx;
			.black{
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis; 
				flex: 8;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}
			}
			.activelist{
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FB6A4B;
			}
			.gary{
				color: #BFBFBF;
				flex: 2;
				text-align: center;
			}
		}
	}
}
.textIcon{
	position: absolute;
	bottom: 61rpx;
	right: 37rpx;
	view{
		width: 35rpx;
		height: 40rpx;
		background: #EBEBEB;
		border-radius: 16px;
		margin: 20rpx 0;
		image{
			width: 35rpx;
			height: 40rpx;
		}
	}
}
</style>
